<template>
  <div class="app-container">
    <div class="app-title">
      <span>单位信息编辑</span>
    </div>
    <!-- 切换按钮 -->
    <el-row>
      <el-col :span="22">
        <div class="tap-fillet">
          <el-radio-group v-model="activeName">
            <el-radio-button
              label="0"
              name="add"
            >新增</el-radio-button>
            <el-radio-button
              label="1"
              name="outIn"
            >调转</el-radio-button>
            <el-radio-button
              label="2"
              name="delete"
            >删除</el-radio-button>
          </el-radio-group>

        </div>
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          @click="opendialog"
        >查询
        </el-button>
      </el-col>

    </el-row>
    <el-dialog  v-dialogDrag  
      :close-on-click-modal="false"
      title="查询"
      :visible.sync="dialogQueryFormVisible"
      style="padding:0px;"
      width="30%"
    >
      <el-form
        ref="dataForm"
        class="dialog-Backgroundcolor"
        :model="formData"
        label-position="right"
        label-width="100px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="工资月份：">
              <el-date-picker
                v-model="formData.salaryMonth"
                type="month"
                placeholder="选择月份"
                format="yyyy-MM"
                value-format="yyyy-MM"
                :clearable="false"
              />
            </el-form-item>
          </el-col>
          <el-button
            type="primary"
            style="float:right;margin-top:50px"
            @click="handleFilter"
          >
            查询
          </el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 表格部分 -->
    <!-- 新增表格 -->
    <el-table
      v-if="this.activeName === '0'"
      v-loading="listLoading"
      :data="list"
      :stripe="true"
      fit
      style="margin-top:10px"
      max-height="470px"
      height="470px"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column
        width="80px"
        type="index"
        align="center"
        label="序号"
      />

      <el-table-column
        label="归口"
        prop="归口"
        align="center"
      />
      <el-table-column
        label="单位"
        prop="单位"
        align="center"
      />
      <el-table-column
        label="姓名"
        prop="姓名"
        align="center"
      />
      <el-table-column
        label="身份证号码"
        prop="身份证号码"
        align="center"
      />
      <el-table-column
        label="职务"
        prop="职务"
        align="center"
      />
      <el-table-column
        label="备注"
        prop="备注"
        align="center"
      />
    </el-table>
    <pagination
      v-if="this.activeName === '0'"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 调转表格 -->

    <!-- 删除表格 -->
    <el-table
      v-if="this.activeName === '2'"
      v-loading="deleteListLoading"
      width="80px"
      :data="deletelist"
      :stripe="true"
      fit
      style="margin-top:10px"
      max-height="458px"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column
        type="index"
        align="center"
        label="序号"
      />

      <el-table-column
        label="归口"
        align="center"
        prop="归口"
      />
      <el-table-column
        label="单位代码"
        prop="单位代码"
        align="center"
      />
      <el-table-column
        label="单位"
        prop="单位"
        align="center"
      />
      <el-table-column
        label="姓名"
        prop="姓名"
        align="center"
      />
      <el-table-column
        label="身份证号"
        prop="身份证号"
        align="center"
      />
      <el-table-column
        label="在职"
        prop="在职"
        align="center"
      />
      <el-table-column
        label="离退休"
        prop="离退休"
        align="center"
      />
      <el-table-column
        label="删除原因"
        prop="删除原因"
        align="center"
      />
    </el-table>
    <personChangeInfoChildren
      v-if="this.activeName === '1'"
      ref="chil"
      :month="formData.salaryMonth"
    />
    <pagination
      v-if="this.activeName === '2'"
      :total="deleteTotal"
      :page.sync="deleteListQuery.page"
      :limit.sync="deleteListQuery.limit"
      @pagination="getList"
    />

  </div>
</template>

<script>
import personChangeInfoChildren from '@/views/nestingExternalPages/personChangeInfoChildren'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { PersonChangeAdd, PersonChangeDelete } from '@/api/reportForm'

export default {
  name: 'ComplexTable',
  components: { Pagination, personChangeInfoChildren },
  data() {
    return {
      dialogQueryFormVisible: false,
      activeName: '0',
      list: [],
      total: 0,
      deletelist: [],
      deleteTotal: 0,
      listLoading: false,
      deleteListLoading: false,
      formData: {
        salaryMonth: ''
      },
      listQuery: {
        page: 1,
        limit: 200
      },
      deleteListQuery: {
        page: 1,
        limit: 200
      }

    }
  },
  watch: {
    // 'formData.salaryMonth'(val) {
    //   this.getCurrenMonth()
    // },
    'activeName'(val) {
      this.getCurrenMonth()
      this.getList()
    }
  },
  created() {
    this.getCurrenMonth()
    this.handleFilter()
  },
  mounted() {},
  methods: {
    opendialog() {
      this.dialogQueryFormVisible = true
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      // this.listQuery.limit = 10
      this.getList()
      this.dialogQueryFormVisible = false
    },
    getList() {
      if (this.activeName === '0') {
        this.listLoading = true
        const params = Object.assign({}, this.listQuery, this.formData)
        PersonChangeAdd(params).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      } else if (this.activeName === '1') {
        // this.$refs.chil.handleParQuery(this.formData.salaryMonth)
      } else if (this.activeName === '2') {
        this.deleteListLoading = true
        const params = Object.assign({}, this.deleteListQuery, this.formData)
        PersonChangeDelete(params).then(response => {
          this.deletelist = response.data.rows
          this.deleteTotal = response.data.total
          this.deleteListLoading = false
        })
          .catch(() => {
            this.deletelist = []
            this.deleteTotal = 0
            this.deleteListLoading = false
          })
      }
    },
    getCurrenMonth() {
      const date = new Date()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const year = date.getFullYear()
      this.formData.salaryMonth = year + '-' + month
    }
  }
}
</script>
<style scoped>
</style>
